*{
	margin: 0;
	padding: 0;
	user-select:none;

}


.header{

	width: 100%;
	height: 10%;
	/*background: red;*/
}
.header .logo{

	display: inline-block;
	width: 13.8%;
	/*height: 2%;*/
	color: white;
	/*border: 1px solid blue;*/
	opacity: 0.5;
}

.logo:hover{
	opacity: 1;
}
.header .register{
	float: right;
	margin-right: 1.5em;
	display: inline-block;
	line-height: 4em;
}
.register .login{
	color: white;
	opacity: 0.5;
}
.login:hover{
	opacity: 1;
	cursor: pointer;

}
.register .settings{
	margin-right: 1em;
	margin-left: 1em;
	color: white;
	opacity: 0.5;
}
.settings:hover{
	cursor: pointer;
	opacity: 1;
}
.container{
	width: 100%;
	height:80%;
	/*background: blue;*/
}


/*///////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/

.container .container_in {
	width:85%;
	/*height:80%;*/
	margin: 0 auto;
	/*background: red;*/
}
.container_in .left{
	width: 73%;
	max-height: 80%;
	/*background: pink;*/
	float: left;
}

.container_in .opt_bar{
	width: 100%;
	height: 50px;
	/*background: black;*/
	opacity: 0.8;
	margin-top: 0.5em;
	/*text-align: center;*/


}
.opt_bar span{
	/*line-height: 2em;*/
	/*vertical-align: middle;*/
	width: 5em;
	height: 1.5em;
	color: white;
	font-size: 1.5em;
	margin-right: 0.5em;
	margin-top: 0.5em;
	border-radius: 0.2em;
	display:inline-block;
	text-align: center;
	opacity: 0.8;
	border: 1px solid white;
}
.opt_bar span:hover{
	opacity: 1;
}
.left .list{

	width: 100%;
	height: 27.77em;
}
.left .list li{
	width: 100%;
	height: auto;
	list-style: none;
	float: left;
	
	margin-top: 0.5em;
	border-bottom: 1px solid silver;
	/*background: orange;*/
}
.left .list li div {
	font-size: 1.3em;
	color: white;
	float: left;
	line-height: 1.6em;

}


.list .check {
	text-align: center;
	/*background: white;*/
}
.list .check i{
	display: inline-block;
	border: 1px solid white;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	opacity: 0.5;
	text-align: center;

}

.check i:hover{
	opacity: 1;
}
.seat{
	 visibility: hidden;
	margin-left: 0.5em;
	margin-right:0.5em;

}
.checked{
	opacity: 1 !important;
}
.length{
	opacity: 0.5;
}
.list .hook{
	position: absolute;
	display: inline-block;
	margin-left: -6px;
	margin-top: -3px;


}
.list .number{
	width: 2em;
	height:1em;
}
.number font{
	opacity: 0.5;
}
.number img{
	opacity: 0.5;
}
#wave{
	
	margin-top: 0.5em;
	display:none;
	width: 10px;
	height: 10px;
}

.list .song{
	opacity: 0.5;
	width: 50%;
	height: auto;
	/*background*/: green;

}
.list .btn_list{

	/*display: none;*/
	visibility: hidden;
	float: left;
	opacity:0.5;
	margin-right: 0.5em;
	margin-left: 0.5em;
}
.btn_list:hover{
	opacity: 1 !important;
	cursor: pointer;
}
.list .singer{
	width: 25%;
	height: auto;
	opacity: 0.5;
	/*background: blue;*/
}

.list .music .singer:hover{
	opacity: 1;
	cursor: pointer;
}

/*
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////*/
.container_in .right{
	width: 25%;
	height: 100%;
	float: right;

	/*background: aqua;*/
	text-align: center;
}
.right .img{
	float: right;
	margin-top:8%;
	width: 80%;
	height: 43%;
	/*border: 1px solid red;*/
}
img {
	width: 100%;
	height: 100%; 
}
.right .info{
	float: right;
	margin-top:2%;
	width: 80%;
	height: 20%;
}

.right li{
	list-style: none;
	line-height: 29px;

}
.right .info li span{
	color: white;
	opacity: 0.5;
}
.right .info .detail:hover{
	opacity: 1;
	cursor: pointer;
}
.right .lyric_container{
	float: right;
	margin-top:5.5%;
	width: 80%;
	height: 10em;
	/*background: red;*/
	overflow: hidden;
}
.right .lyric{
	/*background: red;*/
	/*float: right;*/
	margin: 0 auto;
	/*margin-top:5%;*/
	width: 100%;
	height: 10em;
	/*overflow: hidden;*/
	/*background: green;*/
}
.lyric li{
	color: white;
	opacity: 0.5;
}
.lyric .cur{
	color: aqua;
	opacity: 1;
}



/*
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////*/

.footer {
	width: 100%;
	height:4.5em;
	/*background: red;*/
	position: absolute;
	left: 0px;
	bottom: 10px;
}

.footer div span{
	font-size: 2.2em;
}


/*
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////*/

.footer .btn_bar{

	/*background: blue;*/
	margin-right: 3em;
	margin-left: 7.7em;
	width: 9.6%;
	height:100%;
	float: left;
	position:relative;


}

#pre-icon:hover,
#play-icon:hover,
#next-icon:hover{
	opacity: 1;
	cursor: pointer;
}


#pre-icon {
        position: absolute;
        color: white;
        opacity: 0.6;
        width: auto;
		display: inline-block;

        /*height: 100%;*/
        height: 4.5em;
		line-height: 5.8em;
		left: 0px;
		/*background: yellow;*/
        /*transform: translateX(1%) translateY(1730%);*/
    }

#play-icon{
        position: absolute;
        color: white;
        opacity: 0.6;
        /*background: red;*/
        width: auto;
		/*margin-right: 3em;*/
		left: 3.55em;
		display: inline-block;
        height: 4.5em;
		line-height: 5.8em;

        /*transform: translateX(150%) translateY(1730%);	*/
}
#next-icon{
	line-height: 5.8em;
        /*background: green;*/
        width: auto;
        height: 4.5em;
        right: 0px;
	position: absolute;
	color: white;
	display: inline-block;
	opacity: 0.6;
    /*transform: translateX(299%) translateY(1730%);	*/
}

/*
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////*/


.footer .process_bar{
	margin-right: 3em;
	width: 38.6%;
	height:100%;
	float: left;
}

.process_bar .txt{
	width: 100%;
	height: 45%;
	color: white;
	opacity:0.6;
	font-size: 1.3em;
	/*float: left;*/
	/*background: blue;*/
}
.process_bar .pro_bar {
	width: 100%;
	height: 2%;
	margin-top: 2.5%;
	/*margin: 0 auto;*/
	background: silver;
}


.pro_bar .pro_line{

	background: white;
	border-radius: 0.1em;
	height: 0.1em;

	float: left;
}
.pro_bar:hover{
	cursor: pointer;
}
.pro_bar .pro_dot{
	background: white;
	border: 1px solid white;
	border-radius: 4px;
	/*margin-left: 25%;*/

	position: relative;
	top: -3px;
	height: 8px;
	width: 8px;
}

.pro_bar .pro_dot:hover{
	cursor: pointer;
}
/*
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////*/

.footer .self_bar{

	/*background: purple;*/
	margin-right: 3em;
	width: 15%;
	height:100%;
	float: left;
	text-align: center;
	line-height: 50%；

}

.self_bar  font{
	color: white;
	margin-top: 1.1em;
	width: 2.5em;
	font-size: 1.2em;
	display: inline-block;
	border: 1px solid aqua;
	border-radius: 0.5em;
	opacity: 0.5;
}

.self_bar font:hover{
	opacity: 1;
	cursor: pointer;

}

/*
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////*/

.footer .voice_bar{

	margin-right: 3em;
	width: 10%;
	float: left;
	height:100%;
	/*background: silver;*/
}
.voice_bar .icon{
	width: 25%;
	height: 100%;
	/*background: red;*/
	float: left;
	line-height: 6.1em;
}
#voice-icon{

	opacity: 0.5;
	color: white;
}
#voice-icon:hover{
	opacity: 1;
}

.voice_bar .voi_bar {
	width: 75%;
	height: 1%;
	margin-left:2.6em;
	margin-top: 21%;
	background: silver;
	/*display: inline-block;*/
}
.voi_bar .voi_line{

	background: white;
	border-radius: 4px;
	/*display: inline-flex;*/
	float: left;
	height: 0.025em;
	/*width: 100%;*/
	width: 50%;

}
.voi_bar:hover{
	cursor: pointer;
}
.voi_bar .voi_dot{

	background: white;
	border: 1px solid white;
	border-radius: 4px;
	position: relative;
	top: -3px;
	left: 50%;
	height: 8px;
	width: 8px;
}
.voi_bar .voi_dot:hover{
	cursor: pointer;

}


.bg_mask{

	background-size: cover;
	z-index: -2;
	position: absolute;

	top: 0;
	left: 0;

	filter: blur(60px);
	width: 100%;
	height: 100%;
}
.mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

	background: rgba(0,0,0,0.35)
}